<template>
  <view class="page">
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center">
      <view class="_left text-999">{{i18n['银行账号']}}</view>
      <view class="_right text-cut  text-cut  text-right">
        <text class="text-666">{{account.account_id}}</text>
        <text class="margin-left-sm text-blue" @click="handlerCopy(account.account_id)">{{i18n['复制']}}</text>
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
      <view class="_left text-999">{{i18n['银行开户名']}}</view>
      <view class="_right text-cut  text-cut  text-right">
        <text class="text-666">{{account.account_name}}</text>
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
      <view class="_left text-999">{{i18n['开户银行所在地']}}</view>
      <view class="_right text-cut  text-cut  text-right">
        <text class="text-666">{{account.bank_address}}</text>
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center ">
      <view class="_left text-999">{{i18n['开户行']}}</view>
      <view class="_right text-cut  text-cut  text-right">
        <text class="text-666">{{account.bank_branch}}</text>
      </view>
    </view>
    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center border-top-line solid-bottom">
      <view class="_left">{{i18n['打款金额']}}</view>
      <view class="_right text-cut  text-cut  text-right">
        <text class="text-red text-bold">{{account.money || 0}}元</text>
      </view>
    </view>

    <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">{{i18n['打款备注']}}</view>
      <view class="_right text-cut  text-cut  text-right text-666">
        <input type="text" :placeholder="i18n['请输入打款备注']" v-model="pay_remarks" placeholder-class="placeholder" />
      </view>
    </view>
    <view class="shop-item bg-white padding-tb padding-lr text-df flex  flex-direction ">
      <view class="_left">{{i18n['打款截图']}}</view>
      <view class="_right text-right flex margin-top">
        <image src="../../static/upload-code.png" mode="" class="up-img" v-if="!pay_img" @click="upLoadImg()"></image>
        <view class="img-wrap" v-else>
          <text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg()"></text>
          <image class="img" :src="pay_img_url" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <!-- <view class="padding-tb-lg ">
			<view class="text-666 text-center padding-lr padding-tb">保存以下二维码使用支付宝微信扫描可以进行快捷支付</view>
			<view class="flex justify-around align-center">
				<view>
					<image class="pay-img" src="../../static/account.png" @click="handlePreview('../../static/account.png')"></image>
					<view class="padding-top-sm text-center">微信</view>
				</view>
				<view>
					<image class="pay-img" src="../../static/account.png" @click="handlePreview('../../static/account.png')"></image>
					<view class="padding-top-sm text-center">支付宝</view>
				</view>

			</view>
		</view> -->
    <view class="btn-wrap flex justify-between align-center padding-tb-xl padding-lr">
      <view class="btn" @click="handlerPre">{{i18n['上一步']}}</view>
      <view class="btn active" @click="handlerNext">{{i18n['提交']}}</view>
    </view>
  </view>
</template>

<script>
  // @see 引入验证，上传图片
  import {
    UploadImage,
    validate
  } from '@/common/utils/index';
  export default {
    data() {
      return {
        pay_img: '',
        pay_img_url: '',
        pay_remarks: '',
        account: {}
      }
    },
    onLoad() {
      this.getPayInfo();
    },
    methods: {
      handlePreview(url) {
        uni.previewImage({
          current: url,
          urls: [url]
        })
      },
      handlerCopy(str) {
        uni.setClipboardData({
          data: str,
          success: res => {
            console.log(res);
          },
          fail: (err) => {
            console.log(err);
          }
        })
      },
      // 上一步
      handlerPre() {
        uni.navigateBack({
          delta: 1
        });
      },
      // 下一步
      handlerNext() {
        console.log(this.info)
        let info = this.info;
        let {
          pay_img,
          pay_remarks
        } = this;
        if (!pay_img) return this.$message.info(this.i18n['请上传打款截图']);
        let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
        let store_user_id = uni.getStorageSync('store_user_id') || 0;
        this.$api.post(global.apiUrls.pay_img_remark, {
          pay_img: pay_img,
          pay_remarks: pay_remarks
        }, {
          header: {
            Storeid: store_joinin_id,
            Userid: store_user_id
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            uni.navigateBack({
              delta: 1
            })
          } else {
            this.$message.info(res.data.msg);
          }
        }).catch(err => {
          console.log(err);
        })

      },
      getPayInfo() {
        let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
        let store_user_id = uni.getStorageSync('store_user_id') || 0;
        this.$api.post(global.apiUrls.payInfo, {}, {
          header: {
            Storeid: store_joinin_id,
            Userid: store_user_id
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            this.account = res.data.data.account;
          } else {
            this.$message.info(res.data.msg);
          }
        }).catch(err => {
          console.log(err);
        })
      },
      /**
       * @description 上传截图凭证
       */
      upLoadImg() {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
          success: res => {
            console.log(res);
            let list = res.tempFilePaths;
            list.forEach((val, i) => {
              this.uploadUserImg(val);
            });
          }
        });
      },
      /**
       * @description 上传图片
       */
      uploadUserImg(blob) {
        // uni.showLoading();
        let _this = this;
        // 开始上传
        new UploadImage([blob], {
          complete: res => {
            console.log(res);
            if (res.length) {
              this.pay_img = res[0].id;
              this.pay_img_url = res[0].path;
            }
          }
        });
      },
      clearImg() {
        this.pay_img = '';
        this.pay_img_url = '';
      },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #FFFFFF;
    padding-bottom: 200rpx;
  }

  .height-100 {
    height: 100rpx;
  }

  .placeholder {
    color: #bfbfbf;
    font-size: 28rpx;
  }

  .text-bf {
    color: #bfbfbf;
  }

  .shop-item {
    ._left {
      width: 300rpx;
    }

    ._right {
      width: calc(100% - 300rpx);

      .up-img {
        width: 150rpx;
        height: 150rpx;
      }

      .img-wrap {
        width: 150rpx;
        height: 150rpx;
        border: 1px dashed #eeeeee;
        position: relative;

        .close {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
		  z-index: 999;
        }

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .pay-img {
    width: 300rpx;
    height: 300rpx;
  }

  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;

    .btn {
      width: 300rpx;
      height: 88rpx;
      line-height: 86rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      background: #ffffff;
      color: $theme;
      border-radius: 44rpx;
      border: 1px solid $theme;

      &.active {
        background: $bgtheme;
        color: #ffffff;
      }
    }
  }

  .border-top-line {
    border-top: 20rpx solid #F8F8F8;
  }
</style>
